<template>
  <div class="edit-page">
    <div class="edit-head">
      <div class="edit-title">
        交易数据
      </div>
      <div>
        <a-radio-group default-value="yesterday">
          <a-radio-button value="yesterday" @click="changeDate(dateType.yesterday, null, null)">
            昨天
          </a-radio-button>
          <a-radio-button value="week" @click="changeDate(dateType.week, null, null)">
            最近7天
          </a-radio-button>
          <a-radio-button value="month" @click="changeDate(dateType.month, null, null)">
            最近30天
          </a-radio-button>
          <a-radio-button value="total" @click="changeDate(dateType.total, null, null)">
            总计
          </a-radio-button>
        </a-radio-group>
        <a-range-picker :style="{width: '256px', marginLeft: '20px'}" @change="customDateChoice"/>
      </div>
    </div>

    <!-- 交易数据 start -->
    <div class="edit-content">
      <div class="top-data-wrap">
        <div style="background:#FCF1F3;" class="top-data-row">
          <div class="data-wrap">
            <div class="title-row">
              浏览人数
            </div>
            <div>{{ dataInfo.uv }}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row" />
            <div />
          </div>
        </div>
        <div style="background:#F0FDF0;" class="top-data-row">
          <div class="data-wrap">
            <div class="title-row">
              下单人数
            </div>
            <div>{{ dataInfo.orderVisitor}}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row">
              订单数
            </div>
            <div>{{ dataInfo.orderNum }}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row">
              人均订单数
            </div>
            <div>{{ dataInfo.perOrderNum }}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row">
              订单金额
            </div>
            <div>¥{{ dataInfo.orderAmount }}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row" />
            <div />
          </div>
        </div>
        <div style="background:#FDFDF0;" class="top-data-row">
          <div class="data-wrap">
            <div class="title-row">
              支付人数
            </div>
            <div>{{ dataInfo.payVisitor }}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row">
              支付订单数
            </div>
            <div>{{ dataInfo.payOrderNum}}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row">
              人均支付订单数
            </div>
            <div>{{ dataInfo.perPayOrderNum}}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row">
              支付金额
            </div>
            <div>¥{{ dataInfo.payAmount }}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row">
              客单价
            </div>
            <div>¥{{ dataInfo.atv}}</div>
          </div>
          <div class="data-wrap">
            <div class="title-row" />
            <div />
          </div>
        </div>
        <div class="funnel-text">
          <div>访客</div>
          <div>下单</div>
          <div>付款</div>
        </div>
        <div class="right-percent">
          <div class="right-inner-1">
            <div>下单转化率:</div>
            <div style="padding-left:15px;margin-top:3px;">
              {{dataPercent.order }}%
            </div>
          </div>
          <div class="right-inner-2">
            <div>成交转化率:</div>
            <div style="padding-left:15px;margin-top:3px;">
              {{ dataPercent.pay }}%
            </div>
          </div>
          <div class="right-inner-3">
            <div>付款转化率:</div>
            <div style="padding-left:15px;margin-top:3px;">
              {{ dataPercent.order2pay }}%
            </div>
          </div>
        </div>
        <img class="data-funnel" src="../../../assets/img/deal-bak.png" alt>
      </div>
      <div style="display:flex;justify-content:flex-start;">
      </div>
      <div id="deal-line" style="width:100%;height:500px;" >
        <!-- 折线图 -->
        <line-chart-multid :fields="statisticsFields" :dataSource="statistics"></line-chart-multid>
      </div>
    </div>
    <!-- 交易数据 end -->

  </div>
</template>


<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getAction, httpAction } from '@/api/manage'

export default {
  name: "TradeChart",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo
  },
  data() {
    return {
      loading: true,
      center: null,
      statistics: [],
      dataInfo: {},
      dataPercent: {},
      statisticsFields: ["支付金额", "支付人数", "支付笔数", "下单转化率", "付款转化率", "成交转化率"],
      dateType: {total: 0, yesterday: 1, today: 2, week: 3, month: 4, custom: 5},
  }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo();
  },
  methods: {
    initLogInfo () {
      this.requestStatistics(this.dateType.week, null, null);
      this.requestInfo(this.dateType.yesterday, null, null);
    },
    customDateChoice (range) {
      this.changeDate(this.dateType.custom, range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD'));
    },
    changeDate(type, start, end){
      this.requestStatistics(type, start, end)
      this.requestInfo(type, start, end)
    },
    requestStatistics (type, start, end) {
      getAction("/statistics/tradeStatistics", { type: type, dayStart: start, dayEnd: end }).then(res => {
        if (res.success) {
          this.statistics = res.result.lineData
        }
      })
    },
    requestInfo (type, start, end) {
      getAction("/statistics/tradeInfo", { type: type, dayStart: start, dayEnd: end }).then(res => {
        if (res.success) {
          this.dataInfo = res.result.dataInfo;
          this.dataPercent = res.result.dataPercent;
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>

.edit-page {
  display: block;
  box-sizing: border-box;
  padding: 15px;
  margin: 15px;
  background-color: #ffffff;
  min-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;

  .edit-head {
    display: flex;
    line-height: 48px;
    padding: 0 15px 15px;
    box-sizing: border-box;
    border-bottom: solid 1px #eeeeee;

    .edit-title {
      flex: 1;
      font-size: 16px;
      color: #333333;
    }
  }

  .edit-content {
    flex: 1;
    padding: 15px 15px 30px;
    box-sizing: border-box;
    // max-width: 800px;

    .row-label {
      padding: 10px;
      line-height: 18px;
      font-size: 14px;
      color: #333333;
      font-weight: 600;
      background-color: #f8f8f8;
      margin-bottom: 12px;;
    }
  }

  .edit-footer {
    padding: 0 15px;
    border-top: solid 1px #eeeeee;
    line-height: 60px;
    text-align: center;
    box-sizing: border-box;
  }

  .edit-footer-w {
    z-index: 999;
    position: fixed;
    left: 290px;
    right: 15px;
    bottom: 0;
    background-color: #ffffff;
    padding: 0 15px;
    border-top: solid 1px #eeeeee;
    line-height: 60px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 -3px 5px #eee;
  }

  .edit-footer-z {
    z-index: 999;
    position: fixed;
    left: 69px;
    right: 15px;
    bottom: 0;
    background-color: #ffffff;
    padding: 0 15px;
    border-top: solid 1px #eeeeee;
    line-height: 60px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 -3px 5px #eee;
  }
}

.el-form-item__content {
  //你要修改的CSS属性
  max-width: 100% !important;
}
.flex-r-b {
  display: flex;
  justify-content: space-between;
}
.flex-r-s {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex: 1;
}
.box-border {
  margin: 10px;
}
.card-item {
  flex: 1;
  margin: 10px 10px;
  width: 160px;
  min-width: 160px; // 加入这两个后每个item的宽度就生效了
  max-width: 160px; // 加入这两个后每个item的宽度就生效了
  height: 110px;
}
.body-wrap {
  width: 80%;
  margin: 0 auto;
}
.card-wrap {
  width: 70%;
  min-width: 70%;
  max-width: 70%;
}
.pie-user-wrap {
  width: 50%;
  .pie-user-stat {
    width: 90%;
    margin: 0 auto;
  }
}
.green {
  color: green;
}
.red {
  color: red;
}
.top-data-wrap {
  cursor: default;
  position: relative;
  margin-bottom: 30px;
  .top-data-row:nth-child(1)::-webkit-scrollbar {
    height: 10px;
  }
  .top-data-row:nth-child(1)::-webkit-scrollbar-thumb {
    background: #f8e0e6;
  }
  .top-data-row:nth-child(1)::-webkit-scrollbar-track {
    background: #fcf1f3;
  }
  .top-data-row:nth-child(2)::-webkit-scrollbar {
    height: 10px;
  }
  .top-data-row:nth-child(2)::-webkit-scrollbar-thumb {
    background: #cef6e3;
  }
  .top-data-row:nth-child(2)::-webkit-scrollbar-track {
    background: #f0fdf0;
  }
  .top-data-row:nth-child(3)::-webkit-scrollbar {
    height: 10px;
  }
  .top-data-row:nth-child(3)::-webkit-scrollbar-thumb {
    background: #f5f6ce;
  }
  .top-data-row:nth-child(3)::-webkit-scrollbar-track {
    background: #fdfdf0;
  }
}
// 大
@media screen and (min-width: 1440px) {
  .data-funnel {
    position: absolute;
    right: 45px;
    // left:700px;
    top: 0;
    height: 300px;
    width: 510px;
  }
  .funnel-text {
    position: absolute;
    top: 0;
    right: 295px;
    z-index: 1;
    width: 100px;
    font-size: 1rem;
    color: #eee;
    div:nth-child(1) {
      position: absolute;
      top: 40px;
    }
    div:nth-child(2) {
      position: absolute;
      top: 140px;
    }
    div:nth-child(3) {
      position: absolute;
      top: 230px;
    }
  }
  // 有底色的行
  .top-data-row {
    height: 100px;
  }
  .top-data-row {
    width: calc(100% - 385px);
    // min-width:50%;
    padding: 10px 32px;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    .data-wrap {
      border-radius: 25px;
      width: 120px;
      // min-width:150px;
      padding: 5px 20px;
      // margin-right: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 1rem;
      .title-row {
        font-size: 1rem;

        width: 150px;
        height: 28px;
        // font-size:16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 28px;
      }
    }
  }
  .right-percent {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    font-size: 8px;
    color: #aaa;
    .right-inner-1 {
      width: 100px;
      word-break: nowrap;
      position: absolute;
      top: 80px;
      right: 135px;
    }
    .right-inner-2 {
      width: 100px;
      word-break: nowrap;
      position: absolute;
      top: 130px;
      right: 45px;
    }
    .right-inner-3 {
      width: 100px;
      word-break: nowrap;
      position: absolute;
      top: 180px;
      right: 195px;
    }
  }
}
// 小
@media screen and (max-width: 1440px) {
  .data-funnel {
    position: absolute;
    right: 45px;
    top: 0;
    height: 210px;
    width: 300px;
  }
  .funnel-text {
    position: absolute;
    top: 0;
    right: 155px;
    z-index: 1;
    width: 100px;
    font-size: 0.5rem;
    color: #eee;
    div:nth-child(1) {
      position: absolute;
      top: 30px;
    }
    div:nth-child(2) {
      position: absolute;
      top: 100px;
    }
    div:nth-child(3) {
      position: absolute;
      top: 160px;
    }
  }
  // 有底色的行
  .top-data-row {
    height: 70px;
  }
  .top-data-row {
    width: calc(100% - 250px);
    // min-width:700px;
    padding: 10px 32px;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    .data-wrap {
      border-radius: 25px;
      width: 100px;
      // min-width:150px;
      padding: 5px 20px;
      // margin-right: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0.75rem;
      .title-row {
        font-size: 0.75rem;

        width: 150px;
        height: 28px;
        // font-size:16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 28px;
      }
    }
  }
  .right-percent {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    font-size: 0.25rem;
    color: #aaa;
    .right-inner-1 {
      width: 100px;
      word-break: nowrap;
      position: absolute;
      top: 50px;
      right: 60px;
    }
    .right-inner-2 {
      width: 100px;
      word-break: nowrap;
      position: absolute;
      top: 90px;
      right: 15px;
    }
    .right-inner-3 {
      width: 100px;
      word-break: nowrap;
      position: absolute;
      top: 125px;
      right: 95px;
    }
  }
}

</style>